<!DOCTYPE HTML>
<html>
<head>
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}
		#paintme {
			background: url("img/20140114_app_03-menu_ew.pngs") repeat scroll  -73px  -413px rgba(0, 0, 0, 0);
		}
	</style>
	<script>
		var supportsInlineSvg = (function() {
			var div = document.createElement('div');
			div.innerHTML = '<svg/>';
			return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
		}());
		var supportsInputRange = (function() {
			var input = document.createElement('input');
			input.setAttribute('type', 'range');
			return input.type != 'text';
		}());
		document.documentElement.className += (supportsInlineSvg ? ' inline-svg' : '') + (supportsInputRange ? ' input-range' : '');
	</script>
</head>
<body>
<div class="codehilite" style="display:none;"><pre><span class="kd">var</span> <span class="nx">path</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.squiggle-animated path'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">getTotalLength</span><span class="p">();</span>
<span class="c1">// Clear any previous transition</span>
<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">transition</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">WebkitTransition</span> <span class="o">=</span>
  <span class="s1">'none'</span><span class="p">;</span>
<span class="c1">// Set up the starting positions</span>
<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">strokeDasharray</span> <span class="o">=</span> <span class="nx">length</span> <span class="o">+</span> <span class="s1">' '</span> <span class="o">+</span> <span class="nx">length</span><span class="p">;</span>
<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">strokeDashoffset</span> <span class="o">=</span> <span class="nx">length</span><span class="p">;</span>
<span class="c1">// Trigger a layout so styles are calculated &amp; the browser</span>
<span class="c1">// picks up the starting position before animating</span>
<span class="nx">path</span><span class="p">.</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
<span class="c1">// Define our transition</span>
<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">transition</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">WebkitTransition</span> <span class="o">=</span>
  <span class="s1">'stroke-dashoffset 2s ease-in-out'</span><span class="p">;</span>
<span class="c1">// Go!</span>
<span class="nx">path</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">strokeDashoffset</span> <span class="o">=</span> <span class="s1">'0'</span><span class="p">;</span>
</pre></div>
<div class="squiggle-container squiggle-animated"><svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="640px" height="1136px" viewBox="0 0 640 1136" enable-background="new 0 0 640 1136" xml:space="preserve">
<path fill="none" stroke="#4D4D4D" stroke-miterlimit="10" d="M510.581,880.076c-2.469,6.036-25.245,7.089-32.97,8.631
	c-13.322,2.66-26.9,1.868-40.527,1.868c-26.958,0-51.901-0.592-76.83-7.494c-22.575-6.25-60.948,4.197-80.662-8.97
	c-21.672-14.477-17.364-46.041,0.411-61.198c18.44-15.725,45.595-20.858,66.757-33.004c11.962-6.865,21.592-16.803,33.326-23.993
	c10.616-6.505,23.67-9.9,33.405-16.505c19.773-13.414,21.563-34.714-3.329-43.826c-30.712-11.243-74.285,2.411-106.273-0.334
	c-25.303-2.171-52.388-8.29-60.213-35.635c-7.208-25.187,13.865-59.856,27.933-79.781c16.671-23.614,48.439-37.676,72.557-52.652
	c24.873-15.446,62.629-34.212,79.785-57.675c14.308-19.566,9.276-52.51-7.454-68.284c-18.198-17.159-42.624-18.034-60.074-34.122
	c-31.316-28.873-39.344-58.254-5.288-88.747c20.414-18.277,41.763-32.258,64.986-47.448c7.927-5.185,31.49-25.302,37.463-21.298"/>
</svg></div>
<p><button class="squiggle-go btn">Make it so!</button></p>
<script>
	(function() {
		if (!supportsInlineSvg) return;
		var code = document.querySelectorAll('.codehilite');
		var button = document.querySelector('.squiggle-go');
		code = code[code.length-1].textContent;

		button.style.display = 'inline';
		button.onclick = function(event) {
			// muhahaha
			eval(code);
			event.preventDefault();
		};
	}());
</script>


</body>
</html>